<template>
	<view style="padding:40rpx">
		<view
			style="padding: 20rpx;margin: 80rpx 0;background-color: #fff;box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, .1);border-radius: 10rpx;">
			<view style="margin: 50rpx 30rpx;font-size: 40rpx;">欢迎登录</view>
			<uni-forms ref="userForm" :modelValue="user" :rules="rules" validate-trigger="blur">
				<uni-forms-item name="userName" required>
					<uni-easyinput prefixIcon="person" type="text" v-model="user.userName" placeholder="请输入账号" />
				</uni-forms-item>
				<uni-forms-item name="password" required>
					<uni-easyinput prefixIcon="locked" type="password" v-model="user.password" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item name="code" required>
					<view style="display: flex;">
						<view style="width: 300rpx;">
							<uni-easyinput prefixIcon="checkbox" type="text" v-model="user.code" placeholder="请输入验证码" />
						</view>
						<view style="flex: 1;margin-left: 20rpx;">
							<image :src="codeUrl" style="height: 75rpx;width: 180rpx;" @click="getCode"></image>
							<text style="color: rgb(76, 156, 243)" @click="getCode">换一张</text>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item>
					<button
						style="background-color: #127add;border-color: #127add;color: #fff;height:70rpx;line-height: 70rpx;"
						@click="login">登
						录</button>
				</uni-forms-item>
				<uni-forms-item>
					<view style="text-align: right;">还没有账号？去<navigator style="display: inline-block;color: dodgerblue;margin-left: 4rpx;" url="/pages/register/register">注册</navigator></view>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				codeUrl: "",
				rules: {
					userName: {
						rules: [{
							required: true,
							errorMessage: '请输入账号'
						}, {
                         minLength: 2,
						 maxLength:10,
						 errorMessage:'账号长度在{minLength}到{maxLength}个字符'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码'
						}, {
					     minLength: 1,
						 maxLength:20,
						 errorMessage:'密码长度在{minLength}到{maxLength}个字符'
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码'
						}, {
					     minLength: 4,
						 maxLength:4,
						 errorMessage:'验证码为{minLength}位'
						}]
					},
				}
			}
		},
		onShow() {
			this.getCode();
		},
		methods: {
			getCode() {
				this.$request.get("/user/getCaptcha").then(res => {
					if (res.code === 200) {
						this.codeUrl = res.data.codeUrl;
						console.log(this.codeUrl);
						this.user.uuid = res.data.uuid;
					} else {
						uni.showToast({
							icon: 'error',
							title: res.msg
						})
					}
				})
			},
			login() {
				console.log(this.user)
				this.$refs.userForm.validate().then(res=>{
				this.$request.post("/user/login", this.user).then(res => {
					if (res.code === 200) {
						uni.showToast({
							icon: 'success',
							title: res.msg
						})
						uni.setStorageSync("xm-user", res.data);
						uni.switchTab({
							url: '/pages/index/index'
						})
					} else {
						uni.showToast({
							icon: 'error',
							title: res.msg
						})
					}
				})
				}).catch(err=>{
					console.log("表单错误信息：",err)
				})
			}
		}
	}
</script>

<style>

</style>